<template>
	<p style="text-align: center;font-size: 20px;margin-bottom: 10px;">{{value}}</p>
	<view class="showdiv" id="showdiv" :style="{height:style.canvasHeight}">
		<scroll-view style="width:100%;height: 100%;" 
		:scroll-x="true"  @scroll="scroll" :scroll-left="scroll_left" :show-scrollbar="false">
		<!-- <scroll-view style="width:100%;height: 100%;"> -->
			<canvas :style="{width:style.canvasWidth,height:style.canvasHeight}" 
			canvas-id="canvas_ruler" id="canvas_ruler" :width="canvasWidth">
			</canvas>
		</scroll-view>
		<canvas :style="{width:style.screenWidth,height:style.canvasHeight}"
		canvas-id="canvas-cursor" id="canvas-cursor">
		</canvas>
	</view>
</template>

<script>
	import {drawruler,getCanvasConfig,drowncursor,getcursorvalue,setcursorvalue} from "@/common/js/slider_ruler.js"
	export default {
		data() { 
			return{
				value:0,
				canvasHeight:80,
				canvasWidth:1000,
				scroll_left:0,
			}
		},
		computed:{
			style(){
				let value ={
					canvasHeight:this.canvasHeight+"px",
					canvasWidth:this.canvasWidth+"px",
					screenWidth:this.screenWidth+"px"
				}
				return value
			},
			// scroll_top(){
			// 	let value = this.canvasWidth/2
			// 	console.log(value,this.canvasWidth)
			// 	return value
			// }
		},
		methods:{
			drowtest(){
				// this.canvasHeight=80
				// this.canvasWidth=1000
				//181 0 181 50
				var context = uni.createCanvasContext('canvas_ruler')
				context.setFillStyle('red')
				context.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
				// var context = contextobj.getContext('2d');
				// context.beginPath()
				// context.moveTo(180, 0)
				// context.lineTo(180 ,50)
				// context.setLineWidth(2)
				// context.setStrokeStyle('#FFA5ff')
				// context.stroke()
				// context.draw()
				// console.log('qwe');
			},
			drawruler(){
				let param ={
					canvasid:'canvas_ruler',
					canvascursorid:'canvas-cursor',
					minvalue:10,
					maxvalue:100,
					interval:1,
					defaultvalue:11,
					precision:0
				}
				drawruler(param)
				this.value=getcursorvalue()
				this.canvasHeight=getCanvasConfig().canvasHeight
				this.canvasWidth=getCanvasConfig().canvasWidth
				this.screenWidth = getCanvasConfig().screenWidth;
				this.scroll_left = this.canvasWidth/2-this.screenWidth/2
			},
			scroll(e){
				this.value = setcursorvalue(e.detail.scrollLeft);
			}
		},
		onReady(){
			this.drawruler()
			// this.drowtest()
		}
	}
</script>

<style scoped>
.showdiv{
	position: relative;
	width: 100%;
}
.showdiv #canvas_ruler{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.showdiv #canvas-cursor{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	pointer-events:none;
}
</style>